<!-- 产值co2排放量 -->
<template>
	<view class="consumption-container">
		<view class="title">
			<view class="left-title">产值co2排放量</view>
			<view class="btn">
				<uv-subsection :list="list" mode="button" :current="current" @change="change" activeColor="#3c9cfe"
					bgColor="#ffffff"></uv-subsection>
			</view>
		</view>
		<view class="content">
			<l-echart ref="chartRef" @finished="init"></l-echart>
		</view>
	</view>
</template>

<script setup>
	// import {
	// 	getCurrentInstance
	// } from 'vue';
	// import LEchart from '@/components/l-echart/l-echart.vue'
	// #ifdef H5
	import * as echarts from '@/node_modules/echarts/dist/echarts.esm.js';
	// #endif

	import {
		watch,
		onMounted,
		reactive,
		ref
	} from "vue";

	const props = defineProps({
		modelData: {
			type: Object
		}
	})
	const current = ref(1)
	const list = ref(['上月', '当年'])
	const isShow = ref(false);

	// 产值能耗
	const outputEnergyOption = {
		legend: {
			selectedMode: false, // 禁用图例点击
		},
		tooltip: {
			// 触发类型  经过轴触发axis  经过轴触发item
			trigger: "axis",
			// 轴触发提示才有效
			axisPointer: {
				type: "shadow",
			},
			shadowStyle: {
				color: "rgba(157, 168, 245, 0.1)",
			},

			formatter: (params) => {
				let tip = `{a|${params[0].name}}\n`;
				params.forEach(item => {
					if (item.seriesType === "bar") {
						tip += `{b|${item.seriesName}:} {c|${item.value}}\n`;
					}
				});
				return tip;
			},
			rich: {
				a: {
					fontSize: 14,
					fontWeight: 'bold',
					padding: [0, 0, 5, 0]
				},
				b: {
					color: '#666'
				},
				c: {
					fontWeight: 'bold'
				}
			}

		},
		xAxis: [{
			type: "category",
			data: [],
			axisLabel: {
				rotate: 20, // 标签旋转角度
			},
		}, ],
		yAxis: [{
			name: "tce/万元",
			type: "value",
		}, ],
		series: [],
	}

	const option = {
		legend: {
			bottom: '5px',
			right: '33%',
			// icon: 'rect',
			// itemWidth: 13,
			// itemHeight: 13, // 图例宽高
			textStyle: {
				color: '#000000',
				fontSize: 14
			}
		},
		xAxis: {
			name: '',
			type: 'category',
			data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
			// 不要刻度线
			axisTick: {
				show: false
			},
			// boundaryGap: false, // 不留白，从原点开始
			nameTextStyle: {
				color: '#8c8c8c', //  字体颜色
				fontSize: 14, //  字体大小
				fontWeight: 'normal'
				// 关键代码
				// padding: [-10, -600, -40, -50] // 标题位置调整 上 右 下 左
			},
			axisLine: {
				// 坐标轴轴线相关设置
				onZero: ' ', // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度
				onZeroAxisIndex: '12', // 当有双轴时，可以用这个属性手动指定，在哪个轴的 0 刻度上
				lineStyle: {
					color: '#8c8c8c', // 坐标轴线线的颜色
					width: '1' // 坐标轴线线宽
				}
			}
		},
		yAxis: {
			name: 'MWh',
			type: 'value',
			data: ['100', '200', '300', '400', '500', '600'],
			// 不要刻度
			axisTick: {
				show: false
			},
			nameTextStyle: {
				color: '#8c8c8c', //  字体颜色
				fontSize: 12, //  字体大小
				fontWeight: 'normal'
			},
			splitLine: {
				lineStyle: {
					type: 'solid', // y轴分割线类型
					color: '#E6E6E6',
					width: 2
				}
			},
			axisLine: {
				// 坐标轴轴线相关设置
				onZero: ' ', // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度
				onZeroAxisIndex: '12', // 当有双轴时，可以用这个属性手动指定，在哪个轴的 0 刻度上
				lineStyle: {
					color: '#8c8c8c', // 坐标轴线线的颜色
					width: '1' // 坐标轴线线宽
				}
			}
		},
		grid: {
			left: '13%'
		},
		series: [{
				name: '计划',
				data: [23, 89, 12, 41, 67, 58, 39, 77, 4, 81, 56, 33],
				type: 'line',
				smooth: true,
				// symbol: 'none', // 设置小圆点为 'none'，禁用小圆点
				lineStyle: {
					color: '#F38A64' // 设置线的颜色为黄色
				},
				color: ['#F38A64']
				// 显示每个点的数据
				// itemStyle: { normal: { label: { show: true }}}
			},
			{
				name: '实际',
				data: [23, 89, 12, 41, 67, 58, 39, 77, 4, 81, 56, 33],
				type: 'bar',
				backgroundStyle: {
					// 背景色
					color: 'linear-gradient(180deg, #6CB8FF 0%, #3797F0 100%)'
				},
				color: ['linear-gradient(180deg, #6CB8FF 0%, #3797F0 100%)'],
				itemStyle: { // 使用方法二的写法
					color: {
						type: 'linear',
						x: 0, // 右
						y: 0, // 下
						x2: 0, // 左
						y2: 1, // 上
						colorStops: [{
								offset: 0,
								color: '#6CB8FF' // 0% 处的颜色
							},
							// {
							//   offset: 0.7,
							//   color: '#2378f7' // 70% 处的颜色
							// },
							{
								offset: 1,
								color: '#3797F0' // 100% 处的颜色
							}
						]
					}
				}

			}
		],
		tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
			trigger: 'axis',
			backgroundColor: 'rgba(32, 33, 36,.7)',
			borderColor: 'rgba(32, 33, 36,0.20)',
			borderWidth: 1,
			textStyle: { // 文字提示样式
				color: '#fff',
				fontSize: '12'
			}
		}
	};
	const change = (index) => {
		current.value = index
	}
	//根据接口名称将数据格式化
	const formatByInterface = () => {
		// console.log("reqCarbonData-->", props.modelData)
		if (props?.modelData && props.modelData.interface && props.modelData.interface == 'reqCarbonData') {
			let data = props.modelData.data
			if (data && data.length > 0) {
				isShow.value = false;
				var xAxis = [];
				var mubiao = [];
				var jizhun = [];
				var shiji = [];
				data.forEach((item) => {
					xAxis.push(item.name);
					mubiao.push(item.mubiao);
					jizhun.push(item.jizhun);
					shiji.push(item.shiji);
				});
				outputEnergyOption.xAxis[0].data = xAxis;
				outputEnergyOption.series = [{
						name: "基准值",
						type: "bar",
						barWidth: 14,
						showBackground: true,
						backgroundStyle: {
							color: "rgba(21,136,209,0.1)",
						},
						itemStyle: {
							// 使用方法二的写法
							color: "rgba(255, 117, 150, 0.2)",
						},
						data: jizhun,
						z: 0,
						zlevel: 0,
					},
					{
						type: "pictorialBar",
						barWidth: 14,
						itemStyle: {
							color: "#FF7596", //数据的间隔颜色
						},
						symbolRepeat: "true", //指定图形元素是否重复
						symbolMargin: 2, //图形的两边间隔（『两边』是指其数值轴方向的两边）。
						symbol: "rect",
						symbolSize: [14, 4],
						symbolOffset: [-18, -1],
						data: jizhun,
						z: 1,
						zlevel: 0,
					},
					{
						name: "目标值",
						type: "bar",
						barWidth: 14,
						showBackground: true,
						backgroundStyle: {
							color: "rgba(21,136,209,0.1)",
						},
						itemStyle: {
							color: "rgba(119, 117, 255,0.2)",
						},
						data: mubiao,
						z: 0,
						zlevel: 0,
					},
					{
						type: "pictorialBar",
						barWidth: 14,
						itemStyle: {
							color: "#7775FF", //数据的间隔颜色
						},
						symbolRepeat: "true",
						symbolMargin: 3,
						symbol: "rect",
						symbolSize: [14, 4],
						symbolOffset: [0, -1],
						data: mubiao,
						z: 1,
						zlevel: 0,
					},
					{
						name: "实际完成",
						type: "bar",
						barWidth: 14,
						showBackground: true,
						backgroundStyle: {
							color: "rgba(21,136,209,0.1)",
						},
						itemStyle: {
							// 使用方法二的写法
							color: "rgba(58, 221, 221, 0.2)",
						},
						data: shiji,
						z: 0,
						zlevel: 0,
					},
					{
						type: "pictorialBar",
						barWidth: 14,
						itemStyle: {
							color: "#3ADDDD", //数据的间隔颜色
						},
						symbolRepeat: "true",
						symbolMargin: 3,
						symbol: "rect",
						symbolSize: [14, 4],
						symbolOffset: [18, -1],
						data: shiji,
						z: 1,
						zlevel: 0,
					},
				];

				init();
			} else {
				isShow.value = true;
			}

		}
	}
	// const chartRef = ref < LEchartComponentPublicInstance | null > (null);
	const chartRef = ref(null);
	const init = async () => {
		if (chartRef.value == null) return
		// #ifdef APP
		const chart = await chartRef.value.init(null);
		// #endif
		// #ifdef H5
		const chart = await chartRef.value.init(echarts, null);
		// #endif
		chart.setOption(outputEnergyOption);
	}
	onMounted(() => {

	})
	watch(() => props.modelData, (newVal, oldVal) => {
		formatByInterface();
	}, {
		immediate: true,
		deep: true
	})
</script>

<style lang="scss" scoped>
	.consumption-container {
		width: 100%;
		border-radius: 10px;
		background-color: #ffffff;
		margin: 20rpx 0;
		padding-bottom: 20rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left-title {
				height: 76rpx;
				margin-left: 46rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 76rpx;
			}

			.btn {
				margin-right: 30rpx;

				::v-deep {
					.uv-subsection__item {
						flex: initial !important;
						/* 使用 !important 强制覆盖组件库的默认样式 */
						width: 70rpx;
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						text-align: center;
					}

					.uv-subsection__item--0 {
						.uv-subsection__item__text {
							width: 65rpx;
							border-right: 1px solid #cccccc;
						}
					}
				}
			}
		}

		.content {
			.echart {
				width: 100%;
				height: 300px;
			}
		}
	}
</style>